<template>
      <div id="dt">
            <div class="title">
                  <div class="left">
                        盈友动态
                  </div>
                  <div class="right" @click="newsMore">
                        更多
                  </div>
            </div>

            <div class="content">
                  <div class="item" v-for="(item, index) in listData" :key="index" @click="newsShow(item.id)">
                        <div class="imgbox">
                              <img :src="item.topic" alt="">
                        </div>
                        <div class="titl">
                              {{ item.title }}
                        </div>
                        <div class="abstract">
                              {{ item.abstract }}
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            props: {
                  hangye: Array
            },
            data() {
                  return {
                       
                  }
            },
            computed: {
                  listData() {
                        return this.hangye 
                  }
            },
            mounted () {
                 
            },
            methods: {
                  newsMore() {
                        this.$router.push("/more/1")
                  },
                  newsShow( id ) {
                        this.$router.push(`/newsshow/${id}`)
                  }
            },
      }
</script>

<style lang="scss" scoped>
#dt {
      width: 1080px;
      margin: 50px auto;
      .title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
            cursor: pointer;
            .left {
                  font-size: 30px;
            }
            .right {
                  font-size: 16px;
                  cursor: pointer;
            }
      }
      .content {
            width: 100%;
            display: flex;
            // align-items: center;
            justify-content: space-between;
            margin: 20px 0;
            overflow: hidden;
            .item {
                  width: 262px;
                  margin-left: 10px;
                  .imgbox {
                        width: 262px;
                        height: 180px;
                        overflow: hidden;
                        img {
                              width: 262px;
                              height: 180px;
                              display: block;
                        }
                  }
                  .titl {
                        font-size: 16px;
                        width: 262px;
                        height: 40px;
                        margin: 10px 0;
                        overflow: hidden;
                  }
                  .abstract {
                        font-size: 10px;
                        width: 262px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #8D8D8D;
                  }
            }
      }
}
</style>